<template>
  <div class="app-container">
    <el-scrollbar style="height: 100%;">
      <div class="dataPage-box">
        <div class="new-bot2">
          <div class="newn">
            <div style="font-size:16px">监测数据</div>
            <div style="line-height:20px;font-size:14px;" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通过固定水库监测站、流入河流监测点、固定分布监测点等观测手段获取计量监测数据，覆盖河流流域、库区、取水管网、水厂和供水管网等要素。</div>
          </div>
          <div class="new-data1">
            <span>
              数据检索：
              <el-input v-model="input" placeholder="请输入关键字"></el-input>
            </span>
            <span style="margin-left:15px">
              时间范围：
              <el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
              <!-- <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"></el-input>~ -->
              <!-- <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2"></el-input> -->
            </span>
            <span id="neID">
              <el-button>搜索</el-button>
              <el-button>重置</el-button>
            </span>
          </div>
          <div class="new-dataa" style="padding-top: 0">
            <div class="new-abc">
              <div style="width: 218px;height:158px; ">
                <img src="../../images/timg1.jpg" style="width: 100%;height:100%">
              </div>
              <div class="new-cona">
                <p>库区气候数据</p>
                <div style="margin-top: 20px;">
                  <span>地理资源所白燕博士代表共享平台数据生产组介绍了2015年中国1:10万土地覆被数据产品的研制过程及产品特点，自2014年12月开始，平台负责人杨雅萍组织11个技术可靠的土地覆被科研团队开展全国土地覆被数据遥感解译制图。</span>
                </div>
                <div class="new-bott">
                  <span>2019-5-20</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>文件量：1300</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>下载量：200</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>访问量：640</span>
                  <span class="newspan">ENVI BSQ格式</span>
                </div>
              </div>
            </div>
            <div class="new-abc">
              <div style="width: 218px;height:158px; ">
                <img src="../../images/timg1.jpg" style="width: 100%;height:100%">
              </div>
              <div class="new-cona">
                <p>库区气候数据</p>
                <div style="margin-top: 20px;">
                  <span>地理资源所白燕博士代表共享平台数据生产组介绍了2015年中国1:10万土地覆被数据产品的研制过程及产品特点，自2014年12月开始，平台负责人杨雅萍组织11个技术可靠的土地覆被科研团队开展全国土地覆被数据遥感解译制图。</span>
                </div>
                <div class="new-bott">
                  <span>2019-5-20</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>文件量：1300</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>下载量：200</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>访问量：640</span>
                  <span class="newspan">ENVI BSQ格式</span>
                </div>
              </div>
            </div>
            <div class="new-abc">
              <div style="width: 218px;height:158px; ">
                <img src="../../images/timg1.jpg" style="width: 100%;height:100%">
              </div>
              <div class="new-cona">
                <p>库区气候数据</p>
                <div style="margin-top: 20px;">
                  <span>地理资源所白燕博士代表共享平台数据生产组介绍了2015年中国1:10万土地覆被数据产品的研制过程及产品特点，自2014年12月开始，平台负责人杨雅萍组织11个技术可靠的土地覆被科研团队开展全国土地覆被数据遥感解译制图。</span>
                </div>
                <div class="new-bott">
                  <span>2019-5-20</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>文件量：1300</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>下载量：200</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>访问量：640</span>
                  <span class="newspan">ENVI BSQ格式</span>
                </div>
              </div>
            </div>
            <div class="new-abc">
              <div style="width: 218px;height:158px; ">
                <img src="../../images/timg1.jpg" style="width: 100%;height:100%">
              </div>
              <div class="new-cona">
                <p>库区气候数据</p>
                <div style="margin-top: 20px;">
                  <span>地理资源所白燕博士代表共享平台数据生产组介绍了2015年中国1:10万土地覆被数据产品的研制过程及产品特点，自2014年12月开始，平台负责人杨雅萍组织11个技术可靠的土地覆被科研团队开展全国土地覆被数据遥感解译制图。</span>
                </div>
                <div class="new-bott">
                  <span>2019-5-20</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>文件量：1300</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>下载量：200</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>访问量：640</span>
                  <span class="newspan">ENVI BSQ格式</span>
                </div>
              </div>
            </div>
            <div class="new-abc">
              <div style="width: 218px;height:158px; ">
                <img src="../../images/timg1.jpg" style="width: 100%;height:100%">
              </div>
              <div class="new-cona">
                <p>库区气候数据</p>
                <div style="margin-top: 20px;">
                  <span>地理资源所白燕博士代表共享平台数据生产组介绍了2015年中国1:10万土地覆被数据产品的研制过程及产品特点，自2014年12月开始，平台负责人杨雅萍组织11个技术可靠的土地覆被科研团队开展全国土地覆被数据遥感解译制图。</span>
                </div>
                <div class="new-bott">
                  <span>2019-5-20</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>文件量：1300</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>下载量：200</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>访问量：640</span>
                  <span class="newspan">ENVI BSQ格式</span>
                </div>
              </div>
            </div>

            <el-pagination
              :page-size="20"
              :pager-count="11"
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "basicArchives",
  data() {
    return {
      input: "",
      value6: "",
    };
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.new-dataa {
  .new-abc {
    display: flex;
    padding: 15px 0;
  }
}
.newn{
        line-height: 45px;
        height: 100px;
}
.new-data1 {
  input {
    line-height: 30px;
    height: 30px;
    border-radius: 4px;
    padding: 0 10px;
    border: 1px solid #999999;
    //   background: rgb(253, 253,253,0.9);
  }
  input:focus {
    border-radius: 4px;
  }
  .el-input {
    width: 200px;
  }
}
#neID {
  margin-left: 30px;
}
.new-cona {
  margin-left: 20px;
  width: calc(100% - 345px);
  p {
    color: #198ef8;
    font-size: 18px;
    margin: 0;
  }
  .new-bott {
    margin-top: 45px;
    color: #999999;
    font-size: 14px;
  }
  span {
    font-size: 12px;
    font-weight: 100;
  }
  .newspan {
    color: white;
    background: #dfb100;
    padding: 5px 10px;
    float: right;
  }
}
</style>
